<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>夜读书FM</title>
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="author" content="夜读书,夜读书FM,电台">
    <meta name="description" content="音频分享平台，随时随地，听我想听！4亿用户选择的在线音频平台。1亿多条原创有声内容覆盖有声书、儿童、相声评书、财经新闻、音乐等328类。">
    <meta name="keywords" content="夜读书,网络电台,个人电台,音频,有声书,相声,儿童,音乐,情感">
    <link rel="stylesheet" href="{{ asset('/style/css/yefm.css') }}">      
    <script src="{{ asset('/scripts/ximalaya/xmsdk.min.js') }}"></script>
    <script src="{{ asset('/scripts/ximalaya/vue.min.js') }}"></script>     
</head>
<body>   
<div class="page">
    @include('yefm.inc.top_dark')
    <div id="albumpage" v-cloak>
        <div class="album-page">
            <div class="albumInfoWrapper">
                <div class="albumInfo">
                    <div class="xm-album-cover">
                        <img :src="rows.cover_url_middle">
                    </div>
                    <div class="infoWrapper">
                        <p class="title">@{{rows.album_title}}</p>
                        <div class="nameWrapper">
                            <a href="" class="">
                                <img :src="rows.announcer.avatar_url">
                                <span class="name">@{{rows.announcer.nickname}}</span>
                            </a>
                        </div>
                        <p class="subscribeWrapper"><span class="subscribeCount">已订阅@{{subscribe_count}}人</span><span class="play_count">播放@{{play_count}}</span></p>
                    </div>
                </div>
                <div :style="{backgroundImage: 'url(' + rows.cover_url_middle + ')'}" class="xm-bg--blur blurBg"></div>
            </div>
        </div>
        <div class="rich-title">@{{rows.recommend_reason}}</div>
        <div class="rich-box">@{{rows.album_intro}}</div>
        @include('yefm.adinc.ximalaya')
    </div>    
    <div class="track-list" v-cloak>
        <div class="list-view">
            <div class="list-header">
                <h2 class="list-track_title">节目(@{{rows.total_count}})</h2>
            </div>
        </div>
        <ul class="list-body" id="list-body">
            <li class="list-item" v-for="row in rows.tracks">
                <a :href="'{{url('yefm/ting').'/'}}' + rows.album_id +'/' + row.id" class="track-link">
                    <div class="xm-list-track">
                        <p class="xm-icon list-play icon-list_play">
                            <img src="{{url('images/yefm/btn_play.png')}}" style="width: 25px;height: 25px;">
                        </p>
                        <div class="titleWrapper">@{{row.track_title}}</div>
                        <p class="xm-icon list-download icon-list_download">@{{formatTime(row.updated_at)}}</p>
                    </div>
                </a>
            </li>
        </ul>
        <div class="load-more mr-bottom" v-if="rows.current_page < rows.total_page" @click='loadMore'>点击加载更多</div>
        <div class="load-more mr-bottom" v-else>没有更多了</div>
    </div>
@include('yefm.inc.footer')
</div> 
<script src="{{url('/scripts/ximalaya/yefmconfig.js')}}"></script>
<script>
    const xmly = new XMLY();

    // 批量获取专辑信息
    xmly.request({
        url: 'https://api.ximalaya.com/albums/get_batch',
        type: 'get',
        params: {
            ids: '{{$album_id}}',
            with_metadata: true,
        }
    }).then(res => {
        console.log(res);
        new Vue({
            el: '#albumpage',
            data: {
                rows: res.data[0]
            },
            mounted() {
                document.title = this.rows.album_title + ' - 夜读书FM';
            },
            computed: {
                duration: function() {
                    //音频时长
                    return (this.rows.duration  / 60).toFixed(2);
                },
                subscribe_count: function() {
                    let subscribe_count = this.rows.subscribe_count;
                    if(subscribe_count >= 100000000) {
                        return (subscribe_count/100000000).toFixed(2) + '亿';
                    }
                    else {
                        return (subscribe_count/10000).toFixed(2) + '万';
                    }
                },
                play_count: function ()  {
                    //计算播放次数
                    let count = this.rows.play_count;
                    if(count >= 100000000) {
                        return (count/100000000).toFixed(2) + '亿';
                    }
                    else {
                        return (count/10000).toFixed(2) + '万';
                    }
                }
            },

        });   
    });

    // 专辑浏览
    xmly.request({
        url: 'https://api.ximalaya.com/albums/browse',
        type: 'get',
        params: {
            album_id: '{{$album_id}}',
            sort: 'asc',
            page: 1,
            count: 10,
        }
    }).then(res => {
        console.log(res.data.tracks);
        new Vue({
            el: '.track-list',
            data: {
                rows: res.data,
            },
            methods: {
                loadMore:function(){
                    this.rows.current_page += 1;
                    xmly.request({
                        url: 'https://api.ximalaya.com/albums/browse',
                        type: 'get',
                        params: {
                            album_id: '{{$album_id}}',
                            sort: 'asc',
                            page: this.rows.current_page,
                            count: 10,
                        }
                    })
                    .then(ret => {
                        console.log(ret.data.tracks);
                        //将请求回来的数据和上一次进行组合
                        for(i=0; i<ret.data.tracks.length; i++)
                        {
                            this.$set(this.rows.tracks, this.rows.tracks.length, ret.data.tracks[i]);
                        }
                    })
                    .catch(err => {
                        alert(err);
                    });
                },
                formatTime: function(value) {
                    var date = new Date(value);
                    var Y = date.getFullYear() + '-';
                    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
                    // var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                    // var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    // var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                    // var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
                    return Y + M;
                }
            }
        });   
    });    
</script>
</body>
</html>